<%--
  Created by IntelliJ IDEA.
  User: bobo
  Date: 16-10-27
  Time: 下午2:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="../layout/head.jsp" >
        <jsp:param name="title" value="添加类别" />
    </jsp:include>
    <style>

        #fileUpload{
            width: 0;
            height: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .upload-group {

            float: left;

        }

        .preview-header {
            float: left;
            margin-left: 50px;
        }

        .w100{
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 20px;
            padding: 5px;
            border: 2px solid #ececec;
            border-radius: 3px;
            box-sizing: content-box;
            text-align: center;
            position: relative;
        }

        .preview-header img {
            width: inherit;
            height: inherit;
        }



    </style>
</head>
<body>
<%--<div>--%>
    <%--<h1>新增类别</h1>--%>
    <%--<form action="${pageContext.request.contextPath}/admin/category/add" method="post" enctype="multipart/form-data">--%>
        <%--名称：<input type="text" name="name"><br>--%>
        <%--图片：--%>
        <%--<input type="file" name="fileName"><br>--%>
        <%--<input type="submit" value="提交">--%>
    <%--</form>--%>
<%--</div>--%>
<div class="panel admin-panel">
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 添加类别</strong></div>
    <div class="body-content">
        <form action="${pageContext.request.contextPath}/admin/category/add" method="post" enctype="multipart/form-data" class="form-x">
            <div class="form-group">
                <div class="label">
                    <label>标题：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="name"  data-validate="required:请输入标题" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group ">

                <div class="label">
                    <label></label>
                </div>
                <div class="form-group upload-group">
                    <label for="fileUpload" class="file-upload-btn button bg-blue">点击上传图片</label>
                    <input type="file" id="fileUpload" name="fileName">

                </div>
                <div class="preview-header">
                    <div class="w100">

                    </div>

                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(function(){
        $('#fileUpload').change(function(){
            var file = this.files[0];    //选择上传的文件
            var r = new FileReader();
            r.readAsDataURL(file);    //Base64
            $(r).load(function(){
                $('.w100').html('<img src="'+ this.result +'" alt="" />');
                $('.w55').html('<img src="'+ this.result +'" alt="" />');
            });
        });
    });
</script>
</body>
</html>
